<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        span{display:none}
        .warn{display: block;color:red}
    
    </style>

</head>

<body>
    <div id="app">
        <fieldset>
            <legend>商品详情</legend>
            <P>
                <label for="id">编号</label>
                <input type="text" name="id" id="id" v-model="prodid">
            </P>
            <P>
                <label for="name">名称</label>
                <input type="text" name="name" id="name" v-model="prodname">
                <span v-bind:class="{warn:!isValid}">商品名称不能为空</span>
            </P>
            
        </fieldset>
    </div>
    <script>

        var vm = new Vue({
            el: "#app",
            data: {
               prodid:0,
               prodname:1,
               isValid:true
            },
            watch:{
                prodname:function(newVal,oldVal){
                    if(newVal==""){this.isValid=false;}
                    else{this.isValid=true;}
                    console.log("新值",newVal);
                    console.log("旧值",oldVal);
                }

            }

        })    
    </script>
</body>

</html>